<template>
  <div class="container" :element-loading-text="text">
    <!-- v-loading="isloading" -->
    <div v-show="isShow" class="Card">
      <div class="card">
        <el-card class="card1" :class="{ card11: list.length }">
          <div style="font-weight: 600; color: #333333; font-size: 18px">
            学习作业
          </div>
          <div
            style="display: flex; justify-content: space-around"
            v-if="!list.length"
          >
            <div style="width: 200px; height: 200px; margin-top: 70px">
              <img src="@/assets/learningAssignmentsImg/img1.png" alt="" />
            </div>
          </div>
          <div
            style="display: flex; justify-content: space-around"
            v-if="list.length"
          >
            <div
              style="
                font-size: 20px;
                color: #333333;
                display: flex;
                flex-direction: column;
              "
            >
              <a
                :class="{ active: activeVar == index }"
                style="margin: 13px 0"
                @click="hand(item, index)"
                v-for="(item, index) in list"
                :key="item.learningWorkId"
                >{{ item.learningWorkName }}</a
              >
            </div>
          </div>
        </el-card>
        <el-card class="card2">
          <div style="font-weight: 600; color: #333333; font-size: 18px">
            完成率趋势
          </div>
          <div
            style="
              font-size: 20px;
              color: #333333;
              text-align: center;
              margin-top: 100px;
            "
            v-if="!echartsLineX.length"
          >
            <div
              style="
                width: 200px;
                height: 200px;
                margin: auto;
                margin-top: -65px;

              "
            >
              <img src="@/assets/learningAssignmentsImg/img2.png" alt="" />
            </div>
          </div>
          <div v-if="echartsLineX.length">
            <div
              ref="monthWorkOrderss"
              class="echarts-box"
              style="width: 100%; height: 300%;"

            ></div>
          </div>
        </el-card>
      </div>
      <div class="card3" style="margin-top: 1%">
        <el-card class="card4">
          <div class="handler">
            <div
              style="
                font-weight: 600;
                color: #333333;
                font-size: 18px;
                margin-bottom: 10px;
              "
            >
              当日学生作业完成情况
            </div>

            <div>
              <el-select
                v-model="model.classId"
                @change="getstuvideoCompletion"
                placeholder=""
                style="width: 200px; margin-right: 10px"
              >
                <el-option
                  v-for="item in classList"
                  :value="item.pscId"
                  :key="item.pscId"
                  :label="item.scName + item.pscName"
                  v-loading="fullscreenLoading"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div v-if="data.length">
            <el-table
              :data="data"
              height="400"
              empty-text="当天暂无学生完成作业"
              :header-cell-style="{
                background: 'rgba(61,157,255,0.05)',
                color: '#333333',
              }"
              style="width: 100%"
              :row-class-name="xxxTableRowClassName"
            >
              <el-table-column
                prop="stuName"
                width="450"
                align="center"
                label="学生姓名"
              >
              </el-table-column>
              <el-table-column align="center" label="当日作业情况">
                <template slot-scope="scope">
                  <div class="table">
                    <div style="display: flex">
                      <div style="margin: 10px">
                        作业完成次数 &nbsp;<i
                          style="color: #1890ff; font-style: normal"
                          >{{ scope.row.studyNum }}次</i
                        >
                      </div>
                      <div style="text-align: center;">
                        <el-progress
                          stroke-width="4"
                          width="40"
                          type="circle"
                          :percentage="scope.row.progress"
                        ></el-progress>
                      </div>
                    </div>

                    <div
                      style="
                        white-space: nowrap;
                        margin-right: 30px;
                        cursor: pointer;
                      "
                    >
                      老师点赞
                      <template v-if="scope.row.approve == 1">
                        <svg
                          style="transform: translateY(2px)"
                          t="1656833940827"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="815"
                          width="20"
                          height="20"
                          @click="somebody(scope.row.stuId, scope.row)"
                        >
                          <path
                            d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z"
                            fill="#d81e06"
                            p-id="816"
                          ></path>
                        </svg>
                      </template>
                      <template v-if="scope.row.approve == 0">
                        <svg
                          style="transform: translateY(2px)"
                          t="1668671175471"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          @click="somebody(scope.row.stuId, scope.row)"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="2920"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z m0 63.146667c-41.44 0-70.261333 15.189333-116.96 55.04-2.165333 1.845333-14.4 12.373333-17.941334 15.381333a32.32 32.32 0 0 1-41.770666 0c-3.541333-3.018667-15.776-13.536-17.941334-15.381333-46.698667-39.850667-75.52-55.04-116.96-55.04C230.186667 180.48 149.333333 281.258667 149.333333 426.698667 149.333333 537.6 262.858667 675.242667 493.632 834.826667a32.352 32.352 0 0 0 36.736 0C761.141333 675.253333 874.666667 537.6 874.666667 426.698667c0-145.44-80.853333-246.218667-206.88-246.218667z"
                            p-id="2921"
                          ></path>
                        </svg>
                      </template>
                    </div>

                    <div>
                      <el-button
                        size="small"
                        plain
                        type="primary"
                        @click="hanlder(scope.row)"
                        >详情</el-button
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="!data.length">
            <div
              style="
                width: 400px;
                height: 270px;
                margin: auto;
                margin-top: 80px;
              "
            >
              <img src="@/assets/learningAssignmentsImg/img3.png" alt="" />
            </div>
          </div>
        </el-card>
      </div>
      <el-dialog
        title="检查作业详情"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
      >
        <div class="can">
          <div class="con">
            <div><span class="tex">学生姓名：</span> {{ name }}</div>
            <div>
              <span class="tex">教师点赞：</span
              >{{ dianzan == 1 ? "已点赞" : "未点赞" }}
            </div>
          </div>
          <div class="cen">
            <div>
              <span class="tex">作业完成次数：</span
              ><span
                ><el-tag type="info" v-if="status == 0" style="margin: 0 10px"
                  >未开始</el-tag
                >
                <el-tag type="success" v-if="status == 1" style="margin: 0 10px"
                  >进行中 {{ progress }}%</el-tag
                >
                <el-tag v-if="status == 2" style="margin: 0 10px"
                  >已完成{{ studyNum }}次</el-tag
                >
              </span>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";
import { classSimList } from "@/api/conmmon";
import {
  teacherLearningwork,
  stuworkLink,
  stuvideoCompletion,
  learningworkApprove,
} from "@/api/studyAssignments/learningAssignments";
import theme from "@/utils/customed.json";
import * as echarts from "echarts";
import moment from "moment";
export default {
  name: "",
  components: {
    Calendar,
  },
  props: {},
  data() {
    return {
      name: "",
      dianzan: "",
      status: "",
      studyNum: "",
      progress: "",
      list: [],
      fullscreenLoading: false,
      value1: moment(new Date()).format("YYYY-MM-DD"),
      classModel: {
        pageSize: 1000000,
        pageNum: 1,
      },
      isShow: true,
      isloading: true,
      data: [],
      classList: [],
      dialogVisible: false,
      model: {
        pageSize: 99999,
        pageNum: 1,
        classId: null,
      },
      text: "暂无班级",
      echartsLineX: [],
      echartsLineY: [],
      learningWorkId: null,
      classchomework: null,
      classwhomework: null,
      activeVar: 0,
      stuInfo: {
        allhomeworkshow: {},
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getClassList();
    this.getteacherLearningwork();
    this.getstuworkLink();
  },
  mounted() {},
  methods: {
    getteacherLearningwork() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        schoolId: this.$store.state.user.USER_INFO.pscShId,
      };
      teacherLearningwork(data).then((res) => {
        if (res.code == 200) {
          this.list = res.result;
          this.learningWorkId = res.result[0].learningWorkId;
          this.getstuvideoCompletion();
        }
      });
    },
    getstuworkLink() {
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
      };
      stuworkLink(data).then((res) => {
        if (res.code == 200) {
          this.echartsLineX = res.result.map((item) => item.learningWorkName);
          this.echartsLineY = res.result.map((item) => item.stuCount);
          this.initMonthWorkOrderss();
        }
      });
    },
    getstuvideoCompletion() {
      let data = {
        classId: this.model.classId,
        learningWorkId: this.learningWorkId,
      };
      stuvideoCompletion(data).then((res) => {
        if (res.code == 200) {
          this.data = res.result;
        }
      });
    },
    hand(item, index) {
      this.activeVar = index;
      this.learningWorkId = item.learningWorkId;
      this.getstuvideoCompletion();
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },

    getClassList() {
      this.isloading = true;
      let data = {
        userId: this.$store.state.user.USER_INFO.id,
        pscShId: this.$store.state.user.USER_INFO.pscShId,
      };
      classSimList(data).then((response) => {
        if (response.code === 200) {
          this.classList = response.result;
          if (response.result.length) {
            if (sessionStorage.getItem("classId")) {
              this.model.classId = JSON.parse(
                sessionStorage.getItem("classId")
              );
              sessionStorage.removeItem("classId");
            } else {
              this.model.classId = response.result[0].pscId;
            }

            this.getstuworkLink();
          }
          if (response.result.length) {
            this.isloading = false;
          }
        }
      });
    },
    hanlder(row) {
      this.name = row.stuName;
      this.dianzan = row.approve;
      this.dialogVisible = true;
      this.status = row.status;
      this.studyNum = row.studyNum;
      this.progress = row.progress;
    },

    //  点赞的状态
    somebody(id, status) {
      let data = {
        stuId: id,
        approve: status.approve == 1 ? "0" : "1",
      };
      learningworkApprove(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getstuvideoCompletion();
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    initMonthWorkOrderss() {
      echarts.registerTheme("theme", theme);
      let myChart = echarts.init(this.$refs.monthWorkOrderss, "theme");
      let options = {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: -38,
            formatter: function (value) {
                    if (value.length > 4) {
                      return `${value.slice(0, 4)}...`;
                    }
                    return value;
                  }

          },
          data: this.echartsLineX,
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: this.echartsLineY,

            type: "line",
            // symbol: "circle",
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
              },
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#538FFF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        grid: {
          top: 50,
          right: 30,
          left: 30,
          bottom: 40,
        },
      };

      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    },
  },
};
</script>

<style scoped lang="scss">
.active {
  color: #1890ff;
}
.tex {
  color: #333333;
  font-weight: 600;
}
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.can {
  width: 80%;
  margin-left: 5%;
}
.con {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.handler {
  display: flex;
  justify-content: space-between;
}
.Card {
  display: flex;
  margin-top: -1.5%;
  flex-direction: column;
  .card {
    margin-top: 1%;
    display: flex;
    height: 50%;
    width: 100%;
    .card1 {
      width: 30%;
      height: 400px;

      // overflow-x: hidden;
      // overflow-y: scroll;
    }
    .card11 {
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .card2 {
      margin-left: 1%;
      width: 69%;
    }
  }
  .card3 {
    width: 100%;
    height: 50%;
    .card4 {
      height: 50%;
    }
  }
}

::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
::v-deep .wh_container {
  max-width: 100% !important;
  margin: auto !important;
}
::v-deep .wh_content_all {
  background-color: #fff !important;
}
::v-deep .wh_top_changge li {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #363636 !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #1890ff !important;
  color: #fff !important;
}
::v-deep .wh_jiantou2 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-right: 2px solid #525252 !important;
  transform: rotate(45deg) !important;
}
::v-deep .wh_jiantou1 {
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #525252 !important;
  border-left: 2px solid #525252 !important;
  transform: rotate(-45deg) !important;
}
::v-deep .wh_content_item {
  color: #525252 !important;
}
::v-deep .wh_content_item .wh_isToday {
  color: #fff !important;
  background: #f84c0a !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #f84c0a !important;
}
::v-deep .wh_content_item > .wh_isMark {
  color: #fff !important;
  background: #1890ff !important;
}
::v-deep .wh_item_date:hover {
  background: #1890ff !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
::v-deep .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 20px;
} //表头
::v-deep .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 10px;
} ///各行
// 滚动条大小设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*纵向滚动条*/
  width: 5px;
  /*横向滚动条*/
  height: 5px;
}

// 滚动条滑块样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

// 滚动条背景样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background: none;
}

// 表格横向和纵向滚动条对顶角样式设置
::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #111;
}

// 去除滚动条上方多余显示
::v-deep .el-table__header .has-gutter th.gutter {
  display: none !important;
}
// Firefox滚动条样式设置
::v-deep .el-table__body-wrapper {
  overflow-y: scroll !important;
  scrollbar-color: #bebebf transparent !important;
  scrollbar-width: thin !important;
}
.wh_container {
  height: 331px;
}
.icon {
  padding-top: 5px;
}
::v-deep .el-table__row.statistics-warning-row {
  background: #f5f7fa !important;
}
::v-deep .el-calendar-table .el-calendar-day {
  width: 70px;
  height: 40px;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 2220px;
}
.table {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex {
  flex: 1;
}
</style>
